<template>
  <el-dialog
    :visible.sync="visible"
    title="审核"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="70px"
  >
    <div class="dialogInner">
      <el-form
        :model="check"
        ref="check"
        :label-width="$i18n.locale === 'en-US' ? '150px' : '150px'"
      >
        <el-row>
          <!-- <h3>基本信息</h3> -->
          <el-col :span="12">
            <el-form-item label="商户名称：" prop="">
              {{ dataForm.name || "--" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业名称：" prop="">
              {{ dataForm.companyName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业分类：" prop="">
              {{ $getDictLabel("CompanyType", dataForm.companyType) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商户类型" prop="merchantCategory">
              {{ $getDictLabel("MerchantCategory", dataForm.merchantCategory) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业法人：" prop="">
              {{
                !tempLegalPerson
                  ? jiami(dataForm.legalPerson, 1)
                  : $CryptoJS.decrypt(dataForm.legalPerson)
              }}
              <i class="el-icon-view" @click="show('tempLegalPerson')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码：" prop="">
              {{ dataForm.creditCode || "--" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人身份证号：" prop="">
              {{
                !tempIdCard
                  ? jiami(dataForm.idCard, 3)
                  : $CryptoJS.decrypt(dataForm.idCard)
              }}
              <i class="el-icon-view" @click="show('tempIdCard')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域:" prop="">
              {{ dataForm.islandName || "--" }}
            </el-form-item>
          </el-col>

          <!-- <template v-if="dataForm.merchantCategory == 4">
            <el-col :span="12">
              <el-form-item label="营业时间:" prop="">
                {{ dataForm.openDate || "--" }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="餐饮类型:" prop="">
                {{ $getDictLabel("food_type", dataForm.foodType) }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最低价（人均）:" prop="">
                {{ dataForm.personPrice || "--" }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="提供服务:" prop="">
                {{ dataForm.provideService | delService }}
              </el-form-item>
            </el-col>
          </template> -->
          <!-- <el-col :span="24">
            <el-form-item label="地址：" prop="">
              {{ dataForm.areaDetail || "--" }}
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="地址：" prop="">
              {{ dataForm.provinceName || "" }}{{ dataForm.cityName || "" }}
              {{ dataForm.areaName || "" }}
              {{ dataForm.street || "" }}
              {{ dataForm.areaDetail || "" }}
            </el-form-item>
          </el-col>
          <h3>联系人信息</h3>
          <el-col :span="12">
            <el-form-item label="联系人姓名：" prop="">
              {{
                !tempLinkName
                  ? jiami(dataForm.linkName, 1)
                  : $CryptoJS.decrypt(dataForm.linkName)
              }}
              <i class="el-icon-view" @click="show('tempLinkName')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人号码：" prop="">
              {{
                !tempPhone
                  ? jiami(dataForm.phone, 2)
                  : $CryptoJS.decrypt(dataForm.phone)
              }}
              <i class="el-icon-view" @click="show('tempPhone')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理员用户名：" prop="">
              {{ dataForm.adminName || "--" }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="管理员密码：" prop="">
              加密不可见
              <!-- {{$CryptoJS.decrypt(dataForm.adminPassword)}} -->
            </el-form-item>
          </el-col>
          <h3>资料/照片</h3>
          <el-col :span="12">
            <el-form-item label="相关证件照" prop="">
              <el-image
                v-if="dataForm.licensePic"
                class="avatar"
                :src="dataForm.licensePic"
                :preview-src-list="[dataForm.licensePic]"
              >
              </el-image>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="法人身份证(国徽面)：" prop="">
              <el-image
                v-if="dataForm.idCardFront"
                class="avatar"
                :src="dataForm.idCardFront"
                :preview-src-list="[dataForm.idCardFront]"
              >
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人身份证(人像面)：" prop="">
              <el-image
                v-if="dataForm.idCardReverse"
                class="avatar"
                :src="dataForm.idCardReverse"
                :preview-src-list="[dataForm.idCardReverse]"
              >
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="店铺门头/公司照片：" prop="">
              <template v-if="dataForm.storeFrontPic">
                <el-image
                  class="avatar"
                  v-for="(item, index) in storeFrontPicArr"
                  :key="index"
                  :src="item"
                  :preview-src-list="storeFrontPicArr"
                >
                </el-image>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他可以证明企业实力的证书或奖励：" prop="">
              <el-image
                v-if="dataForm.otherCertificatePic"
                class="avatar"
                :src="dataForm.otherCertificatePic"
                :preview-src-list="[dataForm.otherCertificatePic]"
              >
              </el-image>
            </el-form-item>
          </el-col>
          <h3>审核意见</h3>
          <el-col :span="24">
            <el-form-item
              label="审核结果"
              label-width="120px"
              prop="result"
              :rules="{
                required: true,
                message: this.$t('validate.required'),
                trigger: 'blur',
              }"
            >
              <el-select
                v-model="check.result"
                placeholder="请选择审核结果"
                clearable
              >
                <el-option label="通过" value="1"></el-option>
                <el-option label="不通过" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核反馈" label-width="120px" prop="">
              <el-input
                v-model="check.checkFeedback"
                type="textarea"
                rows="2"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template slot="footer">
      <el-button type="primary" @click="checkData(dataForm.id)">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import Cookies from "js-cookie";
import mixinRegionModule from "@/mixins/region-module";
import debounce from "lodash/debounce";
import { forEach } from "lodash";
export default {
  mixins: [mixinRegionModule],
  data() {
    return {
      visible: false,
      flag: false,
      dataForm: {
        id: "",
        picList: [],
        img0: "",
        img1: "",
        img2: "",
        img3: "",
      },
      storeFrontPicArr: [],
      check: {
        checkFeedback: "",
        result: "",
        id: "",
      },
      tempLegalPerson: "",
      tempIdCard: "",
      tempLinkName: "",
      tempPhone: "",
    };
  },
  filters: {
    delService(val) {
      let str = "";
      if (val != "null" && val) {
        let arr = JSON.parse(val);
        arr.forEach((item, i) => {
          str += item.provideService;
          console.log(str);
        });
      }
      return str;
    },
  },
  methods: {
    jiami(val, type) {
      return this.tmRules(this.$CryptoJS.decrypt(val), type);
    },
    show(name) {
      this[name] = !this[name];
    },
    //脱敏规则
    tmRules(value, type) {
      let res = "";
      if (type == 1) {
        let arr = Array.from(value);
        if (arr.length === 2) {
          res = arr[0] + "*";
        } else if (arr.length > 2) {
          for (let i = 1; i < arr.length - 1; i++) {
            arr[i] = "*";
          }
          res = arr.join("");
        } else {
          res = value;
        }
      } else if (type == 2) {
        res = value.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2");
      } else if (type == 3) {
        res = value.replace(/^(.{4})(?:\d+)(.{4})$/, "$1**********$2");
      }

      return res;
    },
    confirmCheck() {
      if (!this.flag) {
        this.flag = true;
      } else {
        return;
      }
      this.$http
        .post("/scenic/merchant/info/audit", {
          merchantId: this.check.id,
          checkFeedback: this.check.checkFeedback,
          result: this.check.result,
        })
        .then((res) => {
          if (res.data.code != 0) {
            this.flag = false;
            return this.$message.error(res.data.msg);
          }
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 500,
            onClose: () => {
              this.visible = false;
              this.$emit("refreshDataList");
            },
          });
        });
    },
    init() {
      this.visible = true;
      this.provincAreaDetailInfoList();
      this.check.merchantId = "";
      this.check.checkFeedback = "";
      this.check.result = "";
      this.getScenicOptions();
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取区域信息
    getScenicOptions() {
      this.$http
        .get("scenic/isscenic/selectScenicList", {})
        .then(({ data: res }) => {
          if (res.msg == "success") {
            this.scenicOptions = res.data;
          }
        });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get("/scenic/merchant/info/checkInfo/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.storeFrontPicArr = this.dataForm.storeFrontPic.split(",");
          for (let i = 0; i < this.scenicOptions.length; i++) {
            if (this.scenicOptions[i].id == this.dataForm.islandId) {
              this.dataForm.islandName = this.scenicOptions[i].scenicName;
            }
          }
          this.dataForm.picList = this.dataForm.picList
            ? this.dataForm.picList
            : [];
          if (this.dataForm.picList) {
            for (let i = 0; i < this.dataForm.picList.length; i++) {
              if (this.dataForm.picList[i].type == 0) {
                this.dataForm.img0 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 1) {
                this.dataForm.img1 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 2) {
                this.dataForm.img2 = this.dataForm.picList[i].pic;
              }
            }
          }

          // 省市区数据
          if (this.dataForm.city) {
            this.cityAreaDetailInfoList(this.dataForm.province);
          }
          if (this.dataForm.area) {
            this.countyAreaDetailInfoList(this.dataForm.city);
          }
        })
        .catch(() => {});
    },
    // 表单提交
    checkData: debounce(
      function () {
        this.$refs["check"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.check.id = this.dataForm.id;
          this.confirmCheck();
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),
  },
};
</script>

<style scoped lang="scss">
.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    .el-upload:hover {
      border-color: #409eff;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 158px;
    height: 158px;
    line-height: 158px;
    text-align: center;
  }

  .avatar {
    width: 158px;
    height: 158px;
    display: block;
  }
}

h3 {
  padding: 30px 0 15px;
  width: 94%;
  margin: 0 auto 30px;
  border-bottom: 1px solid #ddd;
  color: #303133;
  font-size: 20px;
  overflow: hidden;
}
</style>
